<template>
  <div id="area-edit">
    <el-container>
      <el-main style="height: 510px">
        <el-form label-width="120px">
          <el-form-item style="width: 350px" label="上级地区">
            <el-input disabled v-model="choseItem.name" placeholder="请选择上级地区"></el-input>
          </el-form-item>
          <el-form-item label="上级地区选择器">
            <union-select ref="select" @choseItem="choseData" parent-id="parentId" :url="unionButton.target"
                          :permission="unionButton.id"
                          init-value="0"></union-select>
          </el-form-item>
          <el-form-item style="width: 350px" label="地区类型">
            <el-input disabled v-model="form.areaType" placeholder="请选择地区类型"></el-input>
          </el-form-item>
          <el-form-item label="地区类型选择器">
            <union-select ref="select" @choseItem="choseType" parent-id="parentId" :url="unionButton.children[2].children[0].target"
                          :permission="unionButton.children[2].children[0].id"
                          init-value="winfo_bdd00dbcc2deb411e9b6c954e1add85a5d"></union-select>
          </el-form-item>
          <el-form-item style="width: 350px" label="地区名称">
            <el-input v-model="form.name" placeholder="请输入地区名称"></el-input>
          </el-form-item>
          <el-form-item style="width: 350px" label="父级地区编号">
            <el-input disabled v-model="form.parentCode"></el-input>
          </el-form-item>
          <el-form-item style="width: 350px" label="地区编号">
            <el-input v-model="form.code" placeholder="请输入地区编号"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer style="height: 100%">
        <el-divider></el-divider>
        <el-form label-width="100px">
          <el-form-item style="width: 350px;" label="">
            <el-button @click="submit" type="primary" icon="el-icon-s-promotion">提交</el-button>
          </el-form-item>
        </el-form>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import unionSelect from '../../../common/union-select'

  export default {
    components: {
      unionSelect
    },
    name: "area-edit",
    mounted() {
      this.initData()
    },
    data() {
      return {
        choseItem: {
          id: '0',
          parentId: '0',
          name: '',
          code: '',
        }
      }
    },
    methods: {
      submit() {
        if (!this.validate()) {
          return
        }
        this.common.request({
          url: this.button.target,
          param: this.form,
          permission: this.button.id,
          success: res => {
            if (res.code == 1) {
              this.$emit('save')
            }
          }
        })

      },
      validate() {
        if (this.common.isNotEmpty(this.choseItem.id)) {
          this.form.parentId = this.choseItem.id
        }
        if (this.common.isNotEmpty(this.choseItem.code)) {
          this.form.parentCode = this.choseItem.code
        }

        let validateData = [
          {key: this.form.name, msg: '地区名称'},
          {key: this.form.parentId, msg: '父级地区'},
          {key: this.form.code, msg: '地区编号'},
          {key: this.form.areaTypeId, msg: '地区类型'}]
        return this.common.validate(validateData)
      },
      initData() {
        if (this.common.isNotEmpty(this.form.parentId)) {
          this.choseItem.id = this.form.parentId
        }
        if (this.common.isNotEmpty(this.form.parentName)) {
          this.choseItem.name = this.form.parentName
        }
      },
      choseData(content) {
        this.choseItem = content
        this.form.parentCode = content.code
      },
      choseType(content) {
        this.$set(this.form,'areaTypeId',content.id)
        this.$set(this.form,'areaType',content.name)
      }
    },
    props: {
      form: {
        type: Object,
        default() {
          return {
            id: '',
            name: '',
            code: '',
            parentCode: '',
            parentId: '',
            desc: '',
            areaTypeId: '',
            areaType: ''
          }
        }
      },
      unionButton: {
        type: Object
      },
      button: {
        type: Object
      }
    }
  }
</script>

<style scoped>

</style>
